<template>
 <div class="focus">
   <myheader></myheader>
   <div class="focus-test1">
    <div>
      <input type="text" ref="ipt1">
    </div>
    <div>
      <button @click="focusIpt1">ref点击聚焦</button>
    </div>
   </div>
   <div class="focus-test2">
    <div>
      <input type="text" v-focus :value='dbValue' @input="getThisValue">
    </div>
    <div>
      <button @click="focusIpt2">自定义指令点击聚焦</button>
    </div>
   </div>
   <div class="test3">
     <div>
       <input type="text" @input='getMyChildFn'>
     </div>
    <button @click="getMyChildFn">触发子组件方法</button>
    <child ref='myChild'></child>
   </div>
   <tabbar
      @click="getTabbarFn"
      ref='tabbar'
    >
    </tabbar>
 </div>
</template>
<script>
import child from '../components/childFn'
import tabbar from '../components/tabbar'
import myheader from '../components/header'

export default {
  data () {
    return {
      isFocus:false,
      dbValue: ''
    }
  },
  methods: {
    // 直接触发子组件的事件
    getTabbarFn() {
      this.$refs.tabbar.jumpRouter()
    },
    // 聚焦输入框
    focusIpt1() {
      this.$refs.ipt1.focus()
    },
    // 自定义指令聚焦
    focusIpt2() {
      this.isFocus = true
    },
    // 假双向绑定-.-
    getThisValue(e) {
      // console.log(e.target.value);
      this.dbValue = e.target.value
    },
    // 触发子组件方法
    getMyChildFn() {
      this.$refs.myChild.clickme()
    }
  },
  directives: {
    focus: {
      inserted(el) {
        el.focus()
      }
    }
  },
  computed: {
  },
  components: {
    child,
    tabbar,
    myheader
  }
}
</script>
<style lang="scss" scoped>
.focus{

}
</style>
